<template>
  <div class="preWorkBox">
    <!-- 关键件绑定 -->
    <div class="content">
      <div>
        <el-form
          ref="form"
          class="perForm"
          :model="form"
          :rules="rules"
          label-width="250px"
          size="medium"
          style="margin-top: 15px"
        >
          <el-form-item label="SN码:" prop="sn">
            <el-input
              v-model="form.sn"
              type="textarea"
              placeholder
              :autosize="{ minRows: 2, maxRows: 5 }"
              style="width: 400px; height: 50px"
              @keydown.enter.native="handleEnter"
            />
            <!-- @input="snbutton" -->
            <!-- id="scanner-input" -->
            <!-- <el-button type="primary" @click="snbutton" style="font-size: 24px;">确定</el-button> -->
          </el-form-item>

          <el-form-item label="序列号:" prop="serial">
            <el-input
              id="serial-input"
              v-model="form.serial"
              type="textarea"
              placeholder="输入序列号"
              :autosize="{ minRows: 2, maxRows: 5 }"
              style="width: 400px; height: 50px"
              @keydown.enter.native="serialbutton"
            />
          </el-form-item>
        </el-form>
        <div class="sn_box" v-if="material">
          <div>
            <span>SN码（序列号）：</span>
            <span>{{ snCode }}</span>
          </div>
          <div v-if="material" style="width: 60vw">
            <span>物料</span>
            <el-table
              v-loading="loading"
              :data="materialList"
              row-key="materialList"
            >
              <el-table-column
                label="物料编号"
                width="150"
                align="center"
                prop="itemCode"
              />
              <el-table-column
                label="物料名称"
                width="150"
                align="center"
                prop="itemName"
              />
              <el-table-column
                label="物料规格"
                width="150"
                align="center"
                prop="specification"
              />
              <el-table-column
                label="物料序列号"
                width="150"
                align="center"
                prop="snCodeItem"
              />
              <!-- <el-table-column
                label="物料批次号"
                width="150"
                align="center"
                prop="batchCode"
              /> -->
              <el-table-column
                label="解绑状态"
                align="center"
                prop="status"
                width="120"
              >
                <template slot-scope="scope">
                  <span>
                    <i
                      class="el-icon-circle-check"
                      v-if="scope.row.status == 0"
                      style="color: red; font-size: 16px"
                      >已扫描</i
                    >
                    <i
                      v-if="scope.row.status == 1"
                      class="el-icon-close"
                      style="color: green; font-size: 16px"
                      >未扫描</i
                    >
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <div>
            <p
              style="color: red;"
              v-for="(item, i) in checkObj"
              :key="i"
            >物料序列号{{ item }}不在该工序对应的物料清单中</p>
          </div> -->
        </div>
      </div>
    </div>
    <div class="dialog_footer">
      <el-button @click="reset" style="font-size: 24px">重 置</el-button>
      <el-button type="primary" style="font-size: 24px" @click="submitForm"
        >解 绑</el-button
      >
    </div>
  </div>
</template>

<script>
// failsafeList  13008
import {
  getRestructure,
  failsafeCheck,
  unBundle,
  proFeedback,
} from "@/api/apppro/index";
export default {
  name: "stripping",
  props: {
    formObj: Object,
  },
  data() {
    return {
      form: {},
      loading: false,
      material: false,
      snCode: "",
      itemCode: "",
      // 序列号
      snCodeItem: "",
      rules: {
        itemCode: [
          { required: true, message: "物料/产品编码不能为空", trigger: "blur" },
          {
            max: 64,
            message: "物料/产品编码长度必须小于64个字符",
            trigger: "blur",
          },
        ],
      },
      materialList: [],
      checkObj: [],
      disabledReport: true,
      // 报工成功
      checkBool: false,
      //解绑成功的序列号
      unbindList: [],
    };
  },

  created() {
    // this.getCode();
    console.log("物料解绑");
  },
  methods: {
    getList() {
      let params = { ...this.formObj };
      params.productId = this.formObj.productId;
      params.processId = this.formObj.processId;
      params.processCode = this.formObj.processCode;
      params.productCode = this.formObj.productCode;
      params.snCode = this.snCode;
      console.log(this.formObj, "===== this.formObj=====");
      getRestructure(params).then((response) => {
        if (response.code == 200) {
          this.loading = true;
          this.$modal.msgSuccess(response.msg);
          this.loading = false;
          this.snCodeItem = "";
          this.form.sn = "";
          this.materialList = response.data;
          this.material = true;
        }
      });
    },
    //序列号扫码函数
    serialbutton(e) {
      console.log(e, "eee");
      this.itemJudge();
    },
    // 判断物料码
    itemJudge() {
      // this.loading = true;
      let params = {};
      params.productId = this.formObj.productId;
      params.processId = this.formObj.processId;
      params.routeId = this.formObj.routeId;
      params.snCode = this.snCode;
      //e = 序列号
      params.snCodeItem = this.form.serial;
      failsafeCheck(params).then((res) => {
        // this.checkObj = res.rows
        this.$modal.msgSuccess(res.msg);
        if (res.contains) {
          let index = this.materialList.findIndex(
            (item) => item.itemCode === res.itemCode
          );
          this.$set(this.materialList[index], "status", 0);
          //把序列号清空
          this.form.serial = "";
          // this.$set(this.materialList[index], "snCodeItem", this.snCodeItem);
          console.log(this.materialList, "=====materialList====");
          // let list = this.materialList.filter((_) => _.status == true);
          // if (list.length !== this.materialList.length) {
          //   this.disabledList = true;
          // } else {
          //   this.disabledList = false;
          // }

          //把去掉的序列号存起来
          let Object = {
            itemCode: res.salseItem.itemCode,
            snCodeItem: res.salseItem.snCode,
          };
          this.unbindList.push(Object);
          let tempArr = [];
          let afterData = []; //新数组
          //多个序列号时 操作拼接到同个item
          for (let i = 0; i < this.unbindList.length; i++) {
            if (tempArr.indexOf(this.unbindList[i].itemCode) === -1) {
              afterData.push({
                itemCode: this.unbindList[i].itemCode,
                snCodeItem: this.unbindList[i].snCodeItem,
              });
              tempArr.push(this.unbindList[i].itemCode);
            } else {
              for (let j = 0; j < afterData.length; j++) {
                if (afterData[j].itemCode == this.unbindList[i].itemCode) {
                  afterData[j].snCodeItem =
                    afterData[j].snCodeItem + "," + this.unbindList[i].snCodeItem;
                  break;
                }
              }
            }
          }
          this.unbindList = afterData;
          console.log(this.unbindList, "this.unbindList");
        } else {
          this.checkObj.push(this.snCodeItem);
          this.disabledSubmit = true;
        }
        this.itemCode = res.itemCode;
        this.form.sn = "";
      });
    },
    //扫SN码函数
    // snbutton(e) {
    //   var myInputOrder = document.getElementById("scanner-input");
    //   myInputOrder.onkeydown = (even) => {
    //     console.log(even, "=====e=====");
    //     if (even.key == "Enter") {
    //       this.disabledReport = true;
    //       this.disabledSubmit = false;
    //       this.disabledList = true;
    //       this.checkBool = false;
    //       this.form.sn = e;
    //       this.snCode = this.form.sn;
    //       this.getList(this.form.sn);
    //       //清除掉 解绑 数组
    //       this.unbindList = [];
    //     }
    //   };
    // },
    handleEnter(e) {
      console.log("hahaha", e);
      this.disabledReport = true;
      this.disabledSubmit = false;
      this.disabledList = true;
      this.checkBool = false;
      this.snCode = this.form.sn;
      this.getList(this.form.sn);
      //清除掉 解绑 数组
      this.unbindList = [];
    },
    submitForm() {
      // this.$refs["form"].validate(valid => {
      // let bool = true
      // let list =  this.materialList.filter(_=>_.status==true)
      // if (list.length !== this.materialList.length) {
      //     return this.$modal.msgSuccess('');
      // }
      let params = {};
      params.productId = this.formObj.productId;
      params.processId = this.formObj.processId;
      params.processCode = this.formObj.processCode;
      params.productCode = this.formObj.productCode;

      console.log(this.unbindList, "this.unbindList");

      for (let i = 0; i < this.materialList.length; i++) {
        let snCodeItemList = [];
        //循环 扫描过后的 序列号数组
        for (let I = 0; I < this.unbindList.length; I++) {
          //如果物料编码相同
          if (this.materialList[i].itemCode == this.unbindList[I].itemCode) {
            //如果物料编码和序列号都相同，就是只有一个序列号的
            // if (
            //   this.materialList[i].snCodeItem == this.unbindList[I].snCodeItem
            // ) {
            //   this.materialList.splice(i, 1);
            // } else {
              //有多个序列号的
              snCodeItemList.push(this.unbindList[I].snCodeItem);
              this.materialList[i].snCodeItemList = snCodeItemList;
            // }
          }
        }
      }
      params.proFeedMateriaList = this.materialList;
      params.snCode = this.snCode;
      console.log(params, "params");
      unBundle(params).then((res) => {
        console.log(res, "=======解绑 res=======");
        if (res.code == 200) {
          this.$modal.msgSuccess(res.msg);
          this.reset();
        }
      });
    },
    reset() {
      this.form = {
        sn: undefined,
      };
      this.material = false;
      this.checkObj = [];
      this.materialList = [];
      this.snCode = "";
      this.snCodeItem = "";
      this.resetForm("form");
      this.disabledReport = true;
      this.disabledSubmit = false;
      this.disabledList = true;
      this.checkBool = false;
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.perForm ::v-deep .el-form-item__label {
  font-size: 28px;
}

.content {
  // margin-top: 20px;
  // text-align: center;
  display: flex;
  justify-content: center;
  // width: 100%;
}

.dialog_footer {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  // display: flex;
  // justify-content: center;
}

.sn_box {
  text-align: left;
  margin-left: 10%;
  font-size: 20px;
  line-height: 40px;
}
</style>
